<script setup>
// 1. 引入 ref 函数
import {onMounted, ref} from 'vue'

// 2.1 创建 ref 响应式变量
const myBox = ref(null)

// 刚进入时拿不到 dom
console.log(myBox.value)

onMounted(() => {
    // 最起码都要在挂载后再获取
    console.log(myBox.value)
})

const showMyBox = () => {
    // 3. 可以使用 变量名.value 取得当前 
    console.log(myBox.value)
}
</script>

<template>
    <!-- 2.2 注意 ref 属性必须跟上面创建的响应式变量名相同 -->
    <div ref="myBox">
        我的页面元素
    </div>
    <button @click="showMyBox">获取dom</button>
</template>
  
<style lang="less">

</style>
  